<template>
  <div class="article-container">
    <!-- nav -->
    <van-nav-bar
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      class="header_nav"
    >
      <template #right>
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>
    <div class="page_body">
      <!-- 加载区 -->
      <div class="loading_box" v-if="loadingVisible">
        <van-loading size="48px" vertical>加载中...</van-loading>
      </div>
      <!-- 文章详情 -->
      <div v-else-if="article.title">
        <!-- 文章标题 -->
        <div class="articleTitle">
          {{ article.title }}
        </div>
        <!-- 用户信息 -->
        <div class="userInfo">
          <div class="avatar">
            <van-image
              :src="article.aut_photo"
              fit="cover"
              round
              class="userImg"
            />
            <div class="nameAndTime">
              <span>{{ article.aut_name }}</span>
              <span>{{ article.pubdate | timeFormat }}</span>
            </div>
          </div>
          <!-- <van-button
            size="small"
            round
            :class="article.is_followed ? 'alfocusBtn' : 'focusBtn'"
            :icon="article.is_followed ? '' : 'plus'"
            @click="followBtnClick(article.aut_id)"
            :loading="loadingFollow"
            >{{ article.is_followed ? '已关注' : '关注' }}</van-button
          > -->
          <!-- <follow_indexed
            :class="article.is_followed ? 'alfocusBtn' : 'focusBtn'"
            :is_followed="article.is_followed"
            :autId="article.aut_id"
            @updateFollowState="article.is_followed = !article.is_followed"
          ></follow_indexed> -->

          <!-- 默认 属性:value; 事件:input -->
          <follow_indexed
            :class="article.is_followed ? 'alfocusBtn' : 'focusBtn'"
            :autId="article.aut_id"
            v-model="article.is_followed"
          ></follow_indexed>
        </div>
        <!-- 正文 -->
        <div
          v-html="article.content"
          class="markdown-body"
          ref="article_content"
        ></div>
        <van-divider>正文结束</van-divider>

        <!-- 评论模块 -->
        <comment_list
          :source="article.art_id"
          @passTotalCount="passTotalCount"
          :list="list"
          @reply-click="commentReplay"
        ></comment_list>

        <!-- footer -->
        <van-cell class="footer">
          <!-- 弹出层 -->
          <van-popup v-model="commentPubShow" closeable position="bottom">
            <comment-post
              :target="article.art_id"
              @postSuccess="postSuccess"
              artTag="artTag"
          /></van-popup>

          <van-button class="footer_input" @click="commentPubShow = true"
            >写评论</van-button
          >

          <template #right-icon>
            <!-- <van-icon
              class-prefix="iconfont icondianzan2"
              name="extra"
              class="footer_icon"
            /> -->
            <likes
              class="footer_icon"
              v-model="article.attitude"
              :artId="article.art_id"
            ></likes>

            <van-icon
              class-prefix="iconfont iconpinglun"
              name="extra"
              class="footer_icon"
            >
              <div class="com_count">{{ totalCount }}</div>
            </van-icon>

            <!-- <van-icon
          class-prefix="iconfont iconshoucang"
          name="extra"
          class="footer_icon"
        /> -->
            <collect
              class="footer_icon"
              v-model="article.is_collected"
              :artId="article.art_id"
            ></collect>

            <van-icon
              class-prefix="iconfont iconfenxiang"
              name="extra"
              class="footer_icon"
            />
          </template>
        </van-cell>
      </div>

      <!-- 404 文章不存在,已删除-->
      <div class="status404" v-else-if="errStatus === 404">
        <van-empty
          class="custom-image"
          image="https://img.yzcdn.cn/vant/custom-empty-image.png"
          description="文章不存在或已删除"
        />
      </div>
      <!-- 发生其他错误时,显示的内容 -->
      <div class="error" v-else>
        <van-empty description="搜索发生错误">
          <van-button type="info" class="bottom-button" @click="getArticle">
            点击重新搜索
          </van-button>
        </van-empty>
      </div>
    </div>
    <!--评论回复弹出层 弹出层 -->
    <van-popup
      v-model="commentRepShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <comment-reply
        :comment="comment"
        v-if="commentRepShow"
        @close="commentRepShow = false"
      ></comment-reply>
    </van-popup>
  </div>
</template>

<script>
/**
 * 路由参数的传递,建议使用props解耦,在路由中定义props:true
 * 可以将路由参数映射到组件的prop中,组件接收后即可使用
 */
// 导入接口api
import { getArticleDetail } from '@/api/article'
import { ImagePreview } from 'vant'

import FollowIndex from '@/components/follow'
import Collect from '@/components/collect'
import Likes from '@/components/likes'
import CommentList from './components/commentList'
import CommentPost from './components/commentPost'
import CommentReply from './components/commentReply'

export default {
  name: 'ArticleIndex',
  components: {
    follow_indexed: FollowIndex,
    collect: Collect,
    likes: Likes,
    comment_list: CommentList,
    CommentPost,
    CommentReply
  },
  provide() {
    return {
      artId: this.articleId
    }
  },
  props: {
    articleId: {
      type: [Number, String, Object],
      required: true
    }
  },
  data() {
    return {
      article: {},
      loadingVisible: false,
      errStatus: 0,
      loadingFollow: false,
      totalCount: 0,
      commentPubShow: false,
      list: [],
      commentRepShow: false,
      comment: {}
    }
  },
  created() {
    this.getArticle()
  },
  mounted() {},
  activited() {},
  update() {},
  beforeRouteUpdate() {},
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    onClickRight() {
      console.log(2)
    },
    async getArticle() {
      // 获取文章详情
      this.loadingVisible = true
      try {
        const res = await getArticleDetail(this.articleId)
        // if (Math.random() > 0.5) {
        //   JSON.parse('5465sfafasf4646')
        // }
        // console.log(res)
        this.article = res.data.data
        // 图片预览
        setTimeout(() => {
          this.previewImg()
        }, 0)
      } catch (error) {
        if (error.response && error.response.status === 404) {
          this.errStatus = 404
        }
      }
      this.loadingVisible = false
    },
    previewImg() {
      // 拿到html结构
      // console.log(this.$refs.article_content)
      const articleHtml = this.$refs.article_content
      // 拿到imgs节点
      const imgArr = [...articleHtml.querySelectorAll('img')]
      const imgs = []
      imgArr.forEach((item, i) => {
        imgs.push(item.src)
        item.onclick = () => {
          ImagePreview({
            images: imgs,
            startPosition: i
          })
        }
      })
    },
    postSuccess(data) {
      // 关闭弹出层
      this.commentPubShow = false
      // console.log(data)
      this.list.unshift(data.new_obj)
      this.totalCount++
    },
    passTotalCount(totalCount, results) {
      this.totalCount = totalCount
      this.list.push(...results)
    },
    commentReplay(comment) {
      this.commentRepShow = true
      //   console.log(comment)
      this.comment = comment
    }
  },
  filter: {},
  computed: {},
  watch: {}
}
</script>

<style lang="less" scoped>
@import '~@/styles/github_markdown.css';
.article-container {
  padding: 92px 0;
  overflow-x: hidden;
}
.page_body {
  padding: 0 22px;
}
.van-nav-bar {
  background-color: #3296fa;
  .van-icon-ellipsis::before {
    color: #fff;
  }
  /deep/.van-icon-arrow-left {
    color: #fff;
  }
}
.articleTitle {
  height: 180px;
  font-size: 40px;
  color: #3a3a3a;
  font-weight: 700;
  display: flex;
  align-items: center;
}
.userInfo {
  margin-bottom: 25px;
  height: 125px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .avatar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .userImg {
      width: 70px;
      height: 70px;
    }
    .nameAndTime {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      margin-left: 16px;
      color: #bababa;
      span {
        &:first-child {
          font-weight: 700;
          color: #363636;
        }
      }
    }
  }
  .focusBtn {
    width: 170px;
    height: 58px;
    background-color: #3296fa;
    color: #fff;
    font-size: 28px;
  }
  .alfocusBtn {
    width: 170px;
    height: 58px;
    background-color: #fff;
    color: black;
    font-size: 28px;
  }
}
// 加载区
.loading_box {
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}
// 底部
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .footer_input {
    width: 282px;
    height: 46px;
    border: 1px solid #52ce42;
    border-radius: 23px;
    text-indent: 2em;
  }
  .footer_icon {
    font-size: 45px;
    margin-left: 54px;
  }
}
.iconpinglun {
  position: relative;
}
.com_count {
  width: 50px;
  height: 25px;
  background-color: #f00;
  color: #fff;
  border-radius: 26px;
  font-size: 12px;
  text-align: center;
  line-height: 25px;
  position: absolute;
  top: -6px;
  right: -22px;
}
.header_nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
</style>
